<script setup lang="ts">
import { storeToRefs } from 'pinia'
import LayoutSelect from './components/LayoutSelect.vue'

import { useGlobalStore } from '@/stores'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const visible = useVModel(props, 'modelValue', emit)

const globalStore = useGlobalStore()
const {
  layout,
  menuTheme,
  animationName,
  animationList,
  tableTextAlign,
} = storeToRefs(globalStore)
</script>

<template>
  <el-drawer v-model="visible" title="偏好设置" size="290px" class="text-[var(--el-text-color-primary)]">
    <LayoutSelect v-model:layout="layout" />
    <div class="setting-item">
      <span>
        侧边栏主题
      </span>
      <el-radio-group v-model="menuTheme">
        <el-radio-button value="light">
          浅色
        </el-radio-button>
        <el-radio-button value="dark">
          深色
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="setting-item">
      <span>
        表格内容对齐
        <el-tooltip effect="dark" content="设置全局表格内容对齐方式（请到有表格的页面更改设置以查看效果）">
          <el-icon><IEpQuestionFilled /></el-icon>
        </el-tooltip>
      </span>

      <el-radio-group v-model="tableTextAlign">
        <el-radio-button value="left">
          左对齐
        </el-radio-button>
        <el-radio-button value="center">
          居中对齐
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="setting-item">
      <span>动画类型
        <el-tooltip effect="dark" content="设置全局页面跳转过渡动画">
          <el-icon><IEpQuestionFilled /></el-icon>
        </el-tooltip>
      </span>
      <el-select v-model="animationName" class="!w-131px" placeholder="选择动画">
        <el-option
          v-for="{ label, value } in animationList"
          :key="label"
          :label="label"
          :value="value"
        />
      </el-select>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
.divider {
  margin-top: 15px;
  .el-icon {
    position: relative;
    top: 2px;
    right: 5px;
    font-size: 15px;
  }
}
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  margin: 10px 0;
  span {
    display: flex;
    align-items: center;
    font-size: 14px;
    .el-icon {
      margin-left: 3px;
      font-size: 15px;
      color: var(--el-text-color-regular);
      cursor: pointer;
    }
  }
}
</style>
